<template>
  <div>
    <!-- 顶部部分 -->
    <div class="header-top">
      <div class="logo">
        <a href="#"><img src="https://www.jiakaobaodian.com/core-assets/jiakao/application/home/files/8db7d0f8978fcfd464f665b2ed7a54a2.png" alt="驾考宝典"></a>
      </div>
      <div class="search-container">
        <input type="text" placeholder="请输入关键字">
        <button>搜索</button>
      </div>
    </div>
    
    <!-- 导航栏部分 -->
    <div class="header-bar">
      <ul class="nav">
        <li><a href="#" class="active">首页</a></li>
        <li><a href="#">模拟考试</a></li>
        <li><a href="#">找驾校</a></li>
        <li><a href="#">驾考图</a></li>
        <li><a href="#">交通标志</a></li>
        <li><a href="#">软件下载</a></li>
        <li><a href="#">驾考宝典企业版</a></li>
        <li><a href="#">驾考警校</a></li>
        <li><a href="#">买新车</a></li>
        <li><a href="#">买二手车</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderBar',
};
</script>

<style scoped>
/* 顶部部分样式 */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 20px 40px;
  width: 1100px;
  margin: 0 auto;
  position: relative;
  left: 55px;
}

.logo img {
  
  height: 35px;
}

.search-container {
  display: flex;
  align-items: center;
}

.search-container input {
  width: 230px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
}

.search-container button {
  padding: 10px 10px;
  font-size: 16px;
  border: none;
  background-color: #f0f0f0;
  color: #333333;
  cursor: pointer;
}

/* 导航栏部分样式 */
.header-bar {
  width: 100%;
  background-color: #007aff;
  color: white;
  padding: 0; /* 去掉额外的内边距 */
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  font-size: 16px; /* 确保字体大小不变 */
  font-family: Arial, sans-serif; /* 确保字体与轮播图一致 */
}

.nav li {
  margin: 0;
}

.nav li a {
  color: white;
  text-decoration: none; /* 去掉下划线 */
  font-weight: bold;
  padding: 15px 20px; /* 增加内边距以提高点击区域 */
  display: block; /* 确保整个区域可点击 */
  transition: background-color 0.3s; /* 平滑过渡 */
}

.nav li a.active {
  background-color: #258FC7; /* 选中项背景颜色 */
}

.nav li a:not(.active):hover {
  background-color: #54c0f9; /* 鼠标悬停时背景颜色 */
}
</style>
